<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../layui/src/css/layui.css" media="all">
    <script type="text/javascript" src="../../../layui/src/layui.all.js"></script>
</head>
<body>

<table id="test" lay-filter="test"></table>
<div id="page"></div>
<button id="show">展开</button>
<button id="hide">折叠</button>
<button id="reload">重载</button>
<button id="showSn">展示run数据</button>
<button id="getData">获取data数据</button>

<script type="text/javascript">
    layui.config({
        base: '../../../layui_exts/tableTreeDj/'
    });
    layui.use(['tableTreeDj'], function() {

        let tableTree = layui.tableTreeDj;
        let $ = layui.$;

        // 分页配置
        const page = {
            elem: 'page'
            , layout: ['prev', 'page', 'next', 'last','skip'] //自定义分页布局
            , groups: 5 //只显示 5 个连续页码
            , prev: '上一页'
            , next: '下一页'
            , first: 1 //不显示首页
        };

        // 字段配置
        const cols = [[
            {field:'sn', title:'序号'}
            ,{field:'name', title:'名称',sort:true}
            ,{field:'id', title:'ID'}
            ,{field:'pid', title:'上级ID'}
        ]];

        // 表格配置
        const objTable = {
            elem: '#test'
            //,url: './data.php'
            //,url: './getData0.json'
            ,url: './getData.json'
            ,page:page
            ,limit: 2
            ,cols: cols
            ,id: 'list'
            ,done:function(res, curr, count) {

            }
            ,parseData:function(res) {
                return {
                    "code": res.code1, //解析接口状态
                    "msg": res.msg1, //解析提示文本
                    "count": res.count1, //解析数据长度
                    "data": res.data1 //解析数据列表
                };
            }
            ,loading:true
        }

        const objTree = {
            showCache: true // 开启展开缓存
            , sort: 'asc'
            , title: 'name'
            , defaultShow: true
            , showByPidCallback: (idArr) => {
                //console.log('idArr', idArr);
            }
            , hideByPidCallback: (idArr) => {
                //console.log('idArr', idArr);
            }
        }

        // tableTree 渲染表格
        tableTree.render(objTable, objTree);

        $('#show').click(() => {
            tableTree.showAll(objTable);
        });
        $('#hide').click(() => {
            tableTree.hideAll(objTable);
        });

        $('#showSn').click(() => {
            const run = tableTree.getRun();
            const dataIndex = run.dataIndex;
            for(let id in dataIndex) {
                let has = true;
                let sn = id;
                let idNow = id;

                while(has) {
                    if(!!run.childParent[idNow]) {
                        let pid = run.childParent[idNow];
                        sn = pid + " - " + sn;
                        idNow = pid
                    } else {
                        break;
                    }
                }
                $("[lay-id='"+ objTable.id +"'] table tr[data-index='"+ dataIndex[id] +"'] td[data-field="+ "sn" +"]").children("div").html(sn);
            }
        });

        $('#getData').click(() => {
            const data = tableTree.getDataOri();
            console.log(data);
        });


        $('#reload').click(() => {
            /*
            if(objTable.url === './getData0.json') {
                objTable.url = './getData.json';
            } else {
                objTable.url = './getData0.json';
            }

             */
            objTable.where = {key:"val"}
            tableTree.reload(objTable, 'list');
        });

    });
</script>

</body>
</html>